<template>
  <div>
    <h2 class="tt">请选择支付方式</h2>
    <div class="m-payMethodPicker">
      <ul class="m-list list">
        <van-radio-group v-model="checked">
          <van-radio name="1"><i class="u-icon u-icon-alipay icon"></i> <span class="text">支付宝</span></van-radio>
          <van-radio name="2"> <i class="u-icon u-icon-alipay icon wx"></i><span class="text">微信支付</span></van-radio>
        </van-radio-group>
      </ul>
    </div>
    <van-button class="w-bottomBlockBtn w-button w-button-xxl w-button-block w-button-noRadius"
      color="linear-gradient(to right, #ff6034, #ee0a24)" block @click="handpay">确定</van-button>
    <!-- <van-dialog v-model:show="show"></van-dialog> -->
  </div>
</template>

<script lang="ts">
import { defineComponent } from "vue"
export default defineComponent({
  name: 'Pay',
})
</script>

<script lang="ts" setup>
import { showDialog, showToast, closeDialog } from 'vant';
import { onMounted, ref } from "vue";
import { useRoute, useRouter } from "vue-router";
import { reqPay, reqPayStatus } from "../../api/order";
import QRCode from 'qrcode';
const route = useRoute()
const router = useRouter()
const checked = ref('1')
const pay = ref()
// 获取携带的支付ID
const getOrderId = async () => {
  const { orderId } = route.query
  try {
    const res = await reqPay(orderId)
    // console.log(res);
    pay.value = res.data

  } catch (error) {
    console.log('获取订单信息失败');
  }
}
// 确定支付
const handpay = async () => {
  try {
    // show.value = true
    let imgUrl = await QRCode.toDataURL(pay.value.codeUrl)
    let htmlStr = ` <img src="${imgUrl}" style="width:200px;" /> `
    showDialog({
      title: "请立即支付",
      showCancelButton: true,
      message: htmlStr,
      allowHtml: true,
      confirmButtonText: '已完成支付',
      cancelButtonText: '支付遇到问题',
    }).then(async () => {
      let res = await reqPayStatus(pay.value.orderId);
      if (res.code === 205) {
        clearInterval(intervalId)
        closeDialog()
        showToast('您的订单并未支付成功，点击【立即支付】重新支付！')
      } else {
        clearInterval(intervalId)
        closeDialog()
        showToast('订单支付成功')
        router.replace({
          path: '/',
        });
      }

    }).catch(() => {
      clearInterval(intervalId)
      closeDialog()
      showToast('若支付遇到问题，请联系客服处理!')
    })
    let intervalId = setInterval(async () => {
      // let res = await ReqPayStatus(pay.value.orderId);
      let res = await reqPayStatus(pay.value.orderId);
      if (res.code !== 205) {
        clearInterval(intervalId);
        closeDialog()
        showToast('订单支付成功')
        router.replace({
          path: '/home',
        });
      }
    }, 1000);


  } catch (error) {
    closeDialog()
    showToast({
      type: 'fail',
      message: '支付二维码失效，请联系管理员'
    })
  }
}
onMounted(() => {
  getOrderId()
})

</script>

<style scoped>
.tt {
  padding-left: 0.4rem;
  margin-top: 0.26667rem;
  margin-bottom: 0.26667rem;
  line-height: 1;
  font-size: .32rem;
  color: #999;
}




.m-payMethodPicker>.list .payMethod .icon {
  margin-right: 0.13333rem;
}

.u-icon-alipay {
  width: 50px;
  height: 27px;
  background-position: 0 0;
}

.u-icon-alipay,
.u-icon-applepay {
  display: inline-block;
  vertical-align: middle;
  background-image: url(//yanxuan-static.nosdn.127.net/hxm/yanxuan-cashier/p/20161201/style/img/wap/payMethod-sa3669d3f8a-d330a55e6f.png);
  background-repeat: no-repeat;
  background-size: 241px 243px;
}

.text {
  font-size: 18px;
  font-weight: 700;
}

.m-payMethodPicker>.list {
  padding-left: 20px;
}

/* 重复 */
.m-payMethodPicker>.list .payMethod {
  position: absolute;
  left: -0.89333rem;
  top: 0;
  bottom: 0;
  margin: auto;
  background-position: 0 0;
}

.m-payMethodPicker>.list .payMethod .icon {
  margin-right: 0.13333rem;
}

.wx {
  background-position: 0 -192px;
}

.u-icon-doulipay,
.u-icon-epay,
.u-icon-largepay,
.u-icon-weixin,
.u-icon-wxpay,
.u-icon-yxpay {
  display: inline-block;
  background-image: url(//yanxuan-static.nosdn.127.net/hxm/yanxuan-cashier/p/20161201/style/img/wap/payMethod-sa3669d3f8a-d330a55e6f.png);
  background-repeat: no-repeat;
  background-size: 5.70667rem 6.69333rem;
  width: 0.72rem;
  height: 0.72rem;
  vertical-align: middle;
}

.w-bottomBlockBtn,
.w-bottomBlockBtn:focus,
.w-bottomBlockBtn:visited {
  position: fixed;
  left: 0;
  bottom: 0;
  z-index: 4;
  width: 100%;
  height: 8%;
}
</style>